import { FormCard } from '@components/FormCard'
import { useFormCallback } from '@hooks/useFormCallback'
import { useServiceCreateMutation, useServiceUpdateMutation } from '@services/services'
import { Link } from '@tanstack/react-router'
import { Breadcrumb, Button, DatePicker, Form, Input, InputNumber, Switch } from 'antd'
import dayjs from 'dayjs'
import { useEffect, useState } from 'react'
import ImagePreview from './ImagePreview'

export default function FormServices({ defaultData }) {
  const [data, setData] = useState(defaultData)
  const [form] = Form.useForm()
  const { mutate } = defaultData.id ? useServiceUpdateMutation() : useServiceCreateMutation()
  const { onFinish, onFailed } = useFormCallback(mutate, {
    handle: (values) => {
      return {
        ...values,
        ...(defaultData.id && { id: defaultData.id }),
        published_at: values.published_at.format('YYYY-MM-DD HH:mm:ss'),
      }
    },
  })

  useEffect(() => {
    form.setFieldsValue({ ...data, published_at: dayjs(data.published_at) })
  }, [])

  return (
    <FormCard
      card={{
        title: (
          <Breadcrumb
            items={[
              { title: <Link to="..">客户服务</Link> },
              { title: defaultData.id ? '编辑' : '添加' },
            ]}
          />
        ),
      }}>
      <Form
        name="basic"
        labelCol={{ span: 4 }}
        wrapperCol={{ span: 18 }}
        style={{ maxWidth: '100%' }}
        form={form}
        onFinish={onFinish}
        onFinishFailed={onFailed}
        autoComplete="off">
        <Form.Item label="标题" name="title" rules={[{ required: true, message: '请输入标题' }]}>
          <Input />
        </Form.Item>
        <Form.Item
          label="封面"
          name="image"
          rules={[{ required: true, message: '请上传封面图!' }]}>
          <ImagePreview
            aspect="11:5"
            url={data.image}
            onChange={(resp) => {
              setData((prev) => ({ ...prev, image: resp.url }))
              form.setFieldsValue({ image: resp.url })
            }}
          />
        </Form.Item>

        <Form.Item
          label="描述"
          name="description"
          rules={[{ required: true, message: '请输入描述!' }]}>
          <Input.TextArea rows={3} />
        </Form.Item>
        <Form.Item
          className="w-full"
          label="内容"
          name="content"
          rules={[{ required: true, message: '请输入内容!' }]}>
          <Input.TextArea rows={5} />
        </Form.Item>

        <Form.Item label="排序" name="orderby" width={'206px'}>
          <InputNumber className="w-[206px]!" min={0} />
        </Form.Item>
        <Form.Item label="是否隐藏" name="hide">
          <Switch checkedChildren="隐藏" unCheckedChildren="显示" />
        </Form.Item>
        <Form.Item label="发布时间" name="published_at">
          <DatePicker className="w-[206px]!" />
        </Form.Item>
        <Form.Item label={null}>
          <Button type="primary" htmlType="submit">
            保 存
          </Button>
        </Form.Item>
      </Form>
    </FormCard>
  )
}
